import { defineComponent, ref } from 'vue';

import { useQuasar } from '@teld/q-components';

import FilterOperationSelector from './filter-operation-selector';

import styles from './filter-layout.module.scss';

export default defineComponent({
  props: {},
  emits: [],
  setup(props, { attrs, emit, expose, slots }) {
    const refComponent = ref();
    const value = ref();
    const $q = useQuasar();
    const prependSlot = () => {
      return slots.prepend ? (
        slots.prepend()
      ) : (
        <FilterOperationSelector {...attrs} {...props} />
      );
    };

    const appendSlot = () => {
      return slots.append && <div>{slots.append()}</div>;
    };

    return () => {
      return (
        <div class={[styles.module]}>
          <div>{prependSlot()}</div>
          <div style='flex: 1'>{slots.default?.()}</div>
          {appendSlot()}
        </div>
      );
    };
  },
});
